<template>
    <div>
        <el-card style="width: 1000px; margin: 20px auto; text-align: center;">
            <div slot="header" class="clearfix">
                <span style="font-size: 24px; color: #333;">订单详情</span>
            </div>
<!--            <div>-->
<!--                <el-row>-->
<!--                    <el-col :span="24">-->
<!--                        <h3>订单编号：{{ order.id }}</h3>-->
<!--                        <p style="color: #777777">创建时间：{{ order.time }}  店铺名称：{{ order.shopName }}</p>-->
<!--                        <p style="font-size: 15px">订单状态：{{ order.status }}</p>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--            </div>-->
            <div>
                <el-table :data="orders" style="width: 100%; margin-top: 20px;">
                    <el-table-column prop="productsImg" label="商品图片" width="250" align="center">
                        <template #default="scope">
                            <el-image :src="BASE_URL+scope.row.productsImg" style="width: 50px; height: 50px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productsMsg" label="商品描述" width="200" align="left"></el-table-column>
                    <el-table-column label="数量" width="200" align="center">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.quantity" :min="1" @change="updateTotalAmount"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价" width="150" align="right">
                        <template #default="scope">
                            ￥{{ (scope.row.price).toFixed(1) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="小计" width="150" align="right">
                        <template #default="scope">
                            ￥{{ (scope.row.price * scope.row.quantity).toFixed(1) }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="text-align: right; margin-top: 20px;">
                <span style="font-size: 20px; color: red;">总价：￥{{totalAmount.toFixed(1)}}</span>
            </div>
            <div style="margin-top: 20px;">
                <h3>收货地址</h3>
              <el-select  v-model="addressId" placeholder="请选择地址" >
                <el-option
                    v-for="address in addresses"
                    :key="address.id"
                    :label="'地址: '+address.province+address.city+address.district+address.address+
                    '，联系人：'+address.username+'，电话：'+address.phone"
                    :value="address.id"
                />
              </el-select>
            </div>
            <div style="text-align: right; margin-top: 20px;">
                <el-button type="primary" @click="payOrder">付款</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

import axios from "axios";
import qs from "qs";
import router from "@/router";

const user = getUser();

const addressId = ref("");
// 示例订单数据
const orders = ref([]);

// 计算总价
const totalAmount = computed(() => {
    return orders.value.reduce((total, item) => {
        return total + (item.price * item.quantity);
    }, 0);
});

// 更新总价
const updateTotalAmount = () => {
    // 重新计算总价
    totalAmount.value = orders.value.reduce((total, item) => {
        return total + (item.price * item.quantity);
    }, 0);
};

const payingList = ref([
]);

// 付款方法
const payOrder = () => {
  console.log(orders.value.length);
  for (let i = 0; i < orders.value.length; i++) {
    let tem = {
      id: orders.value[i].id,
      addressId: addressId.value
    };
    console.log(tem);
    payingList.value.push({...tem})
  }
  console.log(payingList.value);
 for (let i = 0; i < payingList.value.length; i++){
   let data = qs.stringify(payingList.value[i]);
   axios.post(BASE_URL+'/v1/user/payOrder',data)
       .then(response => {
         if (response.data.code === 2000) {
         } else {
           alert(response.data.msg);
         }
       })
 }
  // 订单支付成功，跳转到订单详情页面
  router.push('order');
};

const  addresses = ref([]);

const getAddress=()=>{
  let data = qs.stringify({
      userId: user.id
  });

  axios.get(BASE_URL+'/v1/user/selectAddress?'+data)
      .then(response => {
          if (response.data.code === 2000) {
              // 获取地址信息
              addresses.value = response.data.data;
              console.log(addresses.value);
          } else {
              alert(response.data.msg);
          }
      })
}


// 获取待付款订单
const selectOrdersByChecked = (userId) => {
    axios.get(BASE_URL+'/v1/user/select/order/checked/'+userId)
        .then(response => {
            if (response.data.code === 2000) {
                orders.value = response.data.data;
            } else {
                alert(response.data.msg);
            }
        })
};

// 页面加载时获取订单详情
onMounted(() => {
    selectOrdersByChecked(user.id);
    getAddress();
});

</script>

<style scoped>
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}
</style>
